<template>
    <div class="cashier">
        <div class="containter flex-b">
            <!-- 左侧 -->
            <div class="left">
                <div class="box">
                    <el-form size="small" :inline="true" class="input" label-width="68px" v-if="!vipShow">
                        <el-form-item>
                            <el-select v-model="no" placeholder="请选择会员姓名" clearable style="width:290px;"
                                @change="selectVip">
                                <el-option v-for="item in vipList" :label="item.name" :value="item.no"
                                    :key="item.no"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div class="info-box" v-if="vipShow">
                        <div class="info-head flex">
                            <div class="info-left">
                                <img src="@/assets/logo/logo.png" alt="">
                            </div>
                            <div class="info-middle">
                                <div class="flex-a flex-b">
                                    <div class="edit"><span>{{ vipInfo.name }}</span><i @click="vipOpen = true"
                                            class="el-icon-edit"></i></div>
                                    <div class="icon"><i class="el-icon-circle-close" @click="closeVip"></i></div>
                                </div>
                                <div>{{ vipInfo.phone }}（{{ vipInfo.pet }}）</div>
                                <div>会员编号：{{ vipInfo.no }}</div>
                            </div>
                            <div class="info-right flex-a">
                                <!-- <el-button type="primary" class="btn-plain" size="mini"
                                    style="padding: 8px 20px;">切换</el-button> -->
                                <!-- <i class="el-icon-circle-close" @click="closeVip"></i> -->
                            </div>
                        </div>
                        <div class="info-foot">备注：</div>
                    </div>
                </div>
                <div class="vip" v-if="vipShow">
                    <div class="tab-list flex-a">
                        <div :class="tabActive == item.value ? 'active item' : 'item'" v-for="item in tabArray"
                            :key="item.value" @click="clickTab(item.value)">
                            <span>{{ item.name }}</span>
                            <i></i>
                        </div>
                    </div>
                    <div class="vip-box box" v-if="tabActive == 'vip'">
                        <div class="vip-t" @click="toVipCard" v-if="vipInfo.state == '未激活'">开通会员卡</div>
                        <div class="vip-card" v-if="vipInfo.state == '激活'">
                            <div class="vip-no">{{ vipInfo.no }}</div>
                            <div class="vip-price flex-a flex-b">
                                <div>￥<span>{{ vipInfo.money }}</span></div>
                                <div class="vip-pay" @click="toVipCard(vipInfo.cardId, 'recharge')">充值</div>
                            </div>
                        </div>
                    </div>
                    <div class="vip-box box" v-if="tabActive == 'pet'">
                        <div class="flex petInfo">
                            <div><img :src="vipInfo.petUrl" alt=""></div>
                            <div>
                                <div class="flex-a">
                                    <span>{{ vipInfo.petName }}</span>
                                    <span class="bg">{{ vipInfo.varName }}</span>
                                    <span class="bg">{{ vipInfo.petSex == 1 ? '弟弟' : '妹妹' }}</span>
                                </div>
                                <div class="rk">备注：</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box order" v-if="!vipShow">
                    <div class="head">
                        今日预约【待结账】
                    </div>
                    <div class="content">
                        暂无数据
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <div class="box tableBox">
                    <div class="search flex-a">
                        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="input"
                            label-width="68px">
                            <el-form-item>
                                <el-input v-model="queryParams.name" prefix-icon="el-icon-search" style="width:340px"
                                    placeholder="请输入商品/服务/条形码后按Enter键(支持扫码枪录入)" clearable
                                    @keyup.enter.native="handleQuery" />
                            </el-form-item>
                        </el-form>
                        <el-button type="primary" class="btn" size="mini" @click="selectBuy"
                            style="padding: 12px 40px;margin-left: 10px;">选购</el-button>
                    </div>
                    <div class="shopping flex-b">
                        <div>购物清单<span>（共{{ total }}件）</span></div>
                        <div>
                            <!-- <el-button type="primary" class="btn-plain" size="mini">清空购物车</el-button>
                            <el-select v-model="select" filterable placeholder="销售员" class="input"
                                style="width:100px;margin-left: 10px;" clearable>
                                <el-option label="宠小家" value="c"></el-option>
                            </el-select> -->
                        </div>
                    </div>
                    <el-table :data="dataList" class="input">
                        <el-table-column label="图片" align="center" prop="url">
                            <template slot-scope="scope">
                                <img :src="scope.row.picture" style="width: 50%;" alt="">
                            </template>
                        </el-table-column>
                        <el-table-column label="消费项目" align="center" prop="name" />
                        <el-table-column label="零售价" align="center" prop="memPrice">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.memPrice" :id="scope.row.id" @blur="memBlur" />
                            </template>
                        </el-table-column>
                        <el-table-column label="折扣率" align="center" prop="discount">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.discount" :id="scope.row.id" @blur="disBlur" />
                            </template>
                        </el-table-column>
                        <el-table-column label="折后价" align="center" prop="retPrice">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.retPrice" :id="scope.row.id" @blur="retBlur" />
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" align="center" prop="num">
                            <template slot-scope="scope">
                                <div class="flex flex-a num">
                                    <i class="el-icon-remove" @click="reduce(scope.row)"></i>
                                    <span>{{ scope.row.num }}</span>
                                    <i class="el-icon-circle-plus" @click="add(scope.row)"></i>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="小计" align="center">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.subtotal" :id="scope.row.id" :num="scope.row.num"
                                    @blur="subBlur" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width radio">
                            <template slot-scope="scope">
                                <!-- <span>宠</span> -->
                                <span :class="scope.row.isGive == 1 ? 'active' : ''" @click="song(scope.row)">送</span>
                                <span @click="handleDelete(scope.row)">删</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="box">
                    <div class="foot flex-a">
                        <span>总价</span>
                        <span>￥{{ totalPrice }}</span>
                        <span>优惠</span>
                        <span>￥{{ disPrice }}</span>
                        <span>应付金额￥</span>
                        <span class="num">{{ payablePrice }}</span>
                        <el-button type="primary" class="btn" size="mini" style="padding: 12px 60px;margin-left: 10px;"
                            @click="toPay">去结账</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加或修改服务信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="服务编号" prop="no">
                    <el-input v-model="form.no" placeholder="请输入服务编号" />
                </el-form-item>
                <el-form-item label="服务名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入服务名称" />
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="form.icon" placeholder="请输入图标" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 选购弹窗 -->
        <el-dialog :visible.sync="buyOpen" width="1000px" class="buyDialog" append-to-body>
            <div class="tab-list flex-a">
                <div :class="tab == item.value ? 'active item' : 'item'" v-for="item in tabList" :key="item.value"
                    @click="changeTab(item.value)">
                    <span>{{ item.name }}</span>
                    <i></i>
                </div>
            </div>
            <div class="buy-content flex">
                <div class="buy-left" v-if="tab < 4">
                    <div class="all" v-if="tab < 3" @click="getAll">全部</div>
                    <el-tree v-if="tab < 2" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
                        :default-expand-all="true"></el-tree>
                </div>
                <div :class="tab > 3 ? 'buy-right active' : 'buy-right'">
                    <div class="buy-head" v-if="tab < 4">
                        <el-input v-model="queryParams.name" prefix-icon="el-icon-search" class="input" style="width:300px"
                            :placeholder="tab != 1 ? '请输入商品名称/条形码' : '请输入服务名称/条形码'" clearable
                            @keyup.enter.native="handleQuery" />
                        <el-button type="primary" class="btn" size="mini" style="margin-left: 10px;">查询</el-button>
                    </div>
                    <div class="buy-list">
                        <el-card shadow="hover" v-for="(item, index) in cardList" :class="item.show ? 'active' : ''"
                            :key="item.id" @click.native="tapCard(item, index)">
                            <div class="card-left">
                                <img :src="item.picture || require('@/assets/logo/logo.png')" alt="">
                            </div>
                            <div class="card-right">
                                <div>【其他】{{ item.name }}</div>
                                <div class="num">{{ item.num || 0 }}</div>
                                <div class="flex-b">
                                    <div>会员价 <span>{{ item.memPrice || 0.00 }}</span></div>
                                    <div>零售价 <span>{{ item.retPrice || 0.00 }}</span></div>
                                </div>
                            </div>
                        </el-card>
                        <div class="no-data" v-if="cardList.length == 0">暂无数据</div>
                    </div>
                    <div class="buy-submit flex-b">
                        <div class="left">
                            <el-tag v-for="(item, index) in tags" :key="item.id" closable type="warning"
                                @close="delTag(item, index)">
                                {{ item.name }}
                            </el-tag>
                        </div>
                        <div class="right">
                            <el-button type="primary" class="btn" size="mini" @click="submit"
                                style="padding: 12px 40px;margin-left: 10px;">提交</el-button>
                        </div>
                    </div>
                    <div>
                        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                            @pagination="getList" />
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 结算抽屉 -->
        <el-drawer :visible.sync="drawer" :with-header="false" size="550px">
            <div class="drawer-box">
                <div class="drawer-t">记账支付</div>
                <div class="drawer-list">
                    <div :class="type == item.id ? 'drawer-item active' : 'drawer-item'" v-for="item in list" :key="item.id"
                        @click="type = item.id">
                        <div><img :src="item.url1" v-if="type == item.id" alt="">
                            <img :src="item.url" v-else alt="">
                        </div>
                        <div>{{ item.name }}</div>
                    </div>
                </div>
                <div class="drawer-t">扫码支付</div>
                <div class="drawer-list">
                    <div :class="type == 'pay' ? 'drawer-item active' : 'drawer-item'" @click="type = 'pay'">
                        <div><img src="@/assets/images/pay1.png" v-if="type == 'pay'" alt="">
                            <img src="@/assets/images/pay.png" v-else alt="">
                        </div>
                        <div>在线支付</div>
                    </div>
                </div>
                <div class="total">
                    <div class="flex-a flex-b">
                        <div>账单总价</div>
                        <div><span>￥{{ totalPrice }}</span></div>
                    </div>
                    <div class="flex-a flex-b">
                        <div>折扣优惠</div>
                        <div><span>￥-{{ disPrice }}</span></div>
                    </div>
                    <div class="flex-a flex-b">
                        <div>应付金额</div>
                        <div><span>￥{{ payablePrice - prePrice }}</span></div>
                    </div>
                    <div class="flex-a flex-b border none">
                        <div>实收金额</div>
                        <div>
                            <span v-if="!show" @click="changeShow">￥{{ payablePrice - prePrice }}</span>
                            <el-input type="text" ref="getfocus" @blur="show = false" v-else v-model="orderPrice"
                                :autofocus="true" @input="inputPrice"></el-input>
                        </div>
                    </div>
                </div>
                <div class="input">
                    收银员：
                    <el-select v-model="staffName" placeholder="请选择" style="width: 400px;">
                        <el-option v-for="item in options" :key="item.id" :label="item.staffName" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="drawer-foot flex-a flex-b">
                    <div>订单金额：<span>{{ payablePrice - prePrice }}</span></div>
                    <div><el-button type="primary" class="btn" size="mini" @click="pay"
                            style="padding: 12px 60px;margin-left: 10px;">结账</el-button></div>
                </div>
            </div>
        </el-drawer>
        <!-- 添加或修改会员信息对话框 -->
        <el-dialog title="编辑会员" :visible.sync="vipOpen" width="500px" append-to-body class="center">
            <el-form ref="form" :model="vipForm" :rules="rules" label-width="80px" class="input">
                <el-form-item label="会员姓名" prop="name">
                    <el-input v-model="vipForm.name" placeholder="请输入会员姓名" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="vipForm.phone" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="性别" prop="phone">
                    <el-radio v-model="vipForm.sex" label="1">男</el-radio>
                    <el-radio v-model="vipForm.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="会员生日" prop="date">
                    <el-date-picker clearable v-model="vipForm.date" style="width:100%" type="date"
                        value-format="yyyy-MM-dd" placeholder="请选择会员生日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系地址" prop="address">
                    <el-input v-model="vipForm.address" placeholder="请输入联系地址" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="vipForm.remark" type="textarea" :rows="5" maxlength="200" show-word-limit
                        placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitVip">提交</el-button>
            </div>
        </el-dialog>
        <!-- 退还预存款弹窗 -->
        <el-dialog title="退款确认" :visible.sync="backMoney" width="600px" append-to-body class="center">
            <el-form ref="form" :model="appendForm" :rules="rules" label-width="120px" class="input">
                <el-form-item label="待结账金额：">
                    <span>￥{{ payablePrice }}</span>
                </el-form-item>
                <el-form-item label="预存款金额：">
                    <span>￥{{ prePrice }}</span>
                </el-form-item>
                <el-form-item label="应退款金额：">
                    <span class="back-money">￥{{ prePrice - payablePrice }}</span>
                </el-form-item>
                <el-form-item label="退款方式：" prop="phone">
                    <el-select v-model="appendForm.type" placeholder="请选择" style="width:100%">
                        <el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitBack">退款</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { getProdAllInfo, getListMapClass, getProdInfoByCate, addOrder, getList, changGive, updateUser, setOrderAll, getMap, delInfo } from "@/api/pet/cashier";
import { refPrePriceByCashier } from "../../../api/pet/foster";
import { getVipMap } from "@/api/pet/pets";
export default {
    name: "cashier",
    components: {},
    data() {
        return {
            payTypeList: [
                {
                    label: '现金',
                    value: 'xj',
                },
                {
                    label: '支付宝',
                    value: 'zfb',
                },
                {
                    label: '微信',
                    value: 'wx',
                },
                {
                    label: 'pos机',
                    value: 'pos',
                },
                {
                    label: '其他',
                    value: 'qt',
                },
            ],
            vipForm: {},
            vipOpen: false,
            vipShow: false,
            vipInfo: {},
            tabActive: 'vip',
            tabArray: [
                {
                    name: '会员卡',
                    value: 'vip'
                },
                {
                    name: '宠物信息',
                    value: 'pet'
                }
            ],
            no: '',
            vipList: [],
            select: '',
            drawer: false,
            dataList: [],
            buyOpen: false,
            tags: [],
            cardList: [],
            totalPrice: 0,
            disPrice: 0,
            payablePrice: 0,
            orderPrice: 0,
            prePrice: null,
            show: false,
            backMoney: false,
            appendForm: {},
            treeData: [{
                label: '药品',
                children: [{
                    label: '其他',
                }, {
                    label: '11',
                }, {
                    label: '22',
                }, {
                    label: '33',
                }]
            }, {
                label: '其他',
                children: [{
                    label: '11',
                }, {
                    label: '22',
                }]
            }],
            defaultProps: {
                children: 'list',
                label: 'name'
            },
            tab: 0,
            tabList: [
                {
                    name: '商品',
                    value: 0
                },
                {
                    name: '服务',
                    value: 1
                },
                {
                    name: '活体',
                    value: 2
                },
                // {
                //     name: '套餐',
                //     value: 3
                // },
                {
                    name: '寄养',
                    value: 4
                },
                // {
                //     name: '预约',
                //     value: 5
                // },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            },
            type: '',
            list: [
                {
                    url: require('@/assets/images/wx.png'),
                    url1: require('@/assets/images/wx1.png'),
                    name: '微信',
                    id: 'wx'
                },
                {
                    url: require('@/assets/images/zfb.png'),
                    url1: require('@/assets/images/zfb1.png'),
                    name: '支付宝',
                    id: 'zfb'
                },
                {
                    url: require('@/assets/images/xj.png'),
                    url1: require('@/assets/images/xj1.png'),
                    name: '现金',
                    id: 'xj'
                },
                {
                    url: require('@/assets/images/kb.png'),
                    url1: require('@/assets/images/kb1.png'),
                    name: '会员卡支付',
                    id: 'ka'
                }
            ],
            staffName: '',
            options: []
        };
    },
    created() {
        this.getList()
        getMap().then(res => {
            if (res.code == 200) {
                this.options = res.data
                this.staffName = res.data[0].id
            }
        })
        this.getVipList()
    },
    methods: {
        // tab切换
        clickTab(value) {
            this.tabActive = value
        },
        getVipList() {
            let that = this
            getVipMap().then(res => {
                if (res.code == 200) {
                    that.vipList = res.data
                    if (that.$route.query.vipNo) {
                        that.no = that.$route.query.vipNo
                    }
                    if (that.no != '散客') {
                        that.selectVipFun(that.no)
                    }
                }
            })
        },
        //退回预存款
        submitBack() {
            if (this.prePrice < this.appendForm.prePrice) {
                this.$message({
                    message: '超出预存金额，请重新修改',
                    type: 'warning'
                });
            } else {
                this.appendForm.vipNo = this.vipNo
                refPrePriceByCashier(this.appendForm).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("退还预存款成功");
                        this.backMoney = false
                        this.getList()
                    }
                })
            }
        },
        //切换会员信息
        selectVip(e) {
            if (e) {
                this.selectVipFun(e)
            }
        },
        selectVipFun(val) {
            let list = this.vipList.filter(item => {
                return item.no == val
            })
            if (list.length > 0) {
                this.vipInfo = list[0]
                this.vipShow = true
            }
        },
        toVipCard(cardId, type) {
            this.$router.push({ path: '/vip/addCard', query: { id: this.vipInfo.id, no: this.vipInfo.no, type, cardId } })
        },
        closeVip() {
            this.vipShow = false
        },
        inputPrice(e) {
            this.orderPrice = e.replace(/[^0-9.]/g, "")
        },
        changeShow() {
            this.show = true
            this.$nextTick(() => {
                this.$refs.getfocus.focus();
            })
        },
        submitVip() { },
        handleNodeClick(data) {
            console.log(data);
            this.getProdInfoByCate({ sedCate: data.id, type: this.tab })
        },
        //获取选购分类列表信息
        getProdAllInfo(type) {
            getProdAllInfo(Object.assign({}, this.queryParams, { type })).then(res => {
                if (res.code == 200) {
                    this.cardList = res.rows
                    this.total = res.total
                }
            })
        },
        //获取选购分类
        getListMapClass(type) {
            getListMapClass(Object.assign({}, this.queryParams, { type })).then(res => {
                if (res.code == 200) {
                    console.log(res.data)
                    this.treeData = res.data
                }
            })
        },
        //商品分类筛选
        getProdInfoByCate(data) {
            getProdInfoByCate(data).then(res => {
                if (res.code == 200) {
                    this.cardList = res.rows
                }
            })
        },
        //全部
        getAll() {
            this.getProdInfoByCate({ sedCate: '', type: this.tab })
        },
        //送
        song(row) {
            changGive(row.id).then(res => {
                if (res.code == 200) {
                    this.getList()
                }
            })
        },
        // 零售价
        memBlur(e) {
            this.updateUser({ memPrice: e.target.value, id: e.target.getAttribute("id") })
        },
        //折扣率
        disBlur(e) {
            this.updateUser({ discount: e.target.value, id: e.target.getAttribute("id") })
        },
        //折后价
        retBlur(e) {
            this.updateUser({ retPrice: e.target.value, id: e.target.getAttribute("id") })
        },
        //小计
        subBlur(e) {
            let retPrice = parseInt(Number(e.target.value) / Number(e.target.getAttribute("num")))
            this.updateUser({ subtotal: e.target.value, id: e.target.getAttribute("id"), retPrice })
        },
        //修改数据
        updateUser(data) {
            updateUser(data).then(res => {
                if (res.code == 200) {
                    this.getList()
                }
            })
        },
        //减少
        reduce(row) {
            if (row.num > 1) {
                let n = --row.num
                this.updateUser({ num: n, id: row.id, subtotal: n * row.retPrice })
            }
        },
        //添加
        add(row) {
            let n = ++row.num
            this.updateUser({ num: n, id: row.id, subtotal: n * row.retPrice })
        },
        //提交
        submit() {
            if (this.tags.length > 0) {
                let list = this.tags, ids = ''
                list.forEach(item => {
                    ids += item.id + ','
                })
                addOrder({ type: this.tab, ids }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.buyOpen = false
                        this.getList()
                    }
                })
            } else {
                this.$message({
                    message: '请至少选购一个消费项目',
                    type: 'warning'
                });
            }
        },
        /** 查询服务信息列表 */
        getList() {
            this.loading = true;
            getList(this.queryParams).then(response => {
                this.dataList = response.rows;
                let price = 0, dis = 0, totalPrice = 0
                response.rows.forEach(item => {
                    price += item.subtotal
                    dis += item.memPrice * item.num - item.subtotal
                    totalPrice += item.memPrice * item.num
                })
                this.payablePrice = price.toFixed(2)
                this.disPrice = dis.toFixed(2)
                this.totalPrice = totalPrice.toFixed(2)
                this.orderPrice = price.toFixed(2)
                this.prePrice = response.prePrice == null ? null : Number(response.prePrice)
                this.total = response.total;
                this.loading = false;
            });
        },
        //添加标签
        tapCard(item, index) {
            this.cardList[index].show = !this.cardList[index].show
            var list = []
            this.cardList.forEach(item => {
                if (item.show == true) {
                    list.push(item)
                }
            })
            this.tags = list
        },
        //关闭标签
        delTag(item, index) {
            this.tags.splice(index, 1)
            this.cardList[index].show = false
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // tab切换
        changeTab(value) {
            let that = this
            that.tab = value
            that.getProdAllInfo(value)
            that.getListMapClass(value)
        },
        // 选购
        selectBuy() {
            this.tab = 0
            this.buyOpen = true
            this.tags = []
            this.getProdAllInfo(0)
            this.getListMapClass(0)
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                no: null,
                name: null,
                icon: null,
                type: null,
                remark: null,
                updateUser: null,
                updateTime: null,
                createUser: null,
                createTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加服务信息";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push({ path: '/goods/addSer', query: { id: row.id } })
            // this.reset();
            // const id = row.id || this.ids
            // getInfo(id).then(response => {
            //   this.form = response.data;
            //   this.open = true;
            //   this.title = "修改服务信息";
            // });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateInfo(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addInfo(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        //去结账
        toPay() {
            if (this.prePrice) {
                if (this.prePrice > this.payablePrice) {
                    this.backMoney = true
                    this.appendForm.prePrice = this.prePrice - this.payablePrice
                } else {
                    this.drawer = true
                }
            } else {
                this.drawer = true
            }
        },
        // 结账
        pay() {
            let vip = {}
            this.vipList.forEach(item => {
                if (item.no == this.no) {
                    vip = item
                }
            })
            if (this.type) {
                if (this.vipInfo.money < this.payablePrice && this.type == 'ka') {
                    this.$message({
                        message: '会员卡余额不足！',
                        type: 'warning'
                    });
                } else {
                    setOrderAll({ type: this.type, cashier: this.staffName, vipName: vip.name, vipNo: vip.no, phone: vip.phone, prePrice: this.prePrice, result: this.payablePrice - this.prePrice > 0 ? 1 : 0 }).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: '结账成功！',
                                type: 'success'
                            });
                            this.getVipList()
                            this.drawer = false
                            this.getList()
                        }
                    })
                }
            } else {
                this.$message({
                    message: '请选择支付方式',
                    type: 'warning'
                });
            }
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除服务信息编号为"' + ids + '"的数据项？').then(function () {
                return delInfo(ids);
            }).then(() => {
                this.$modal.msgSuccess("删除成功");
                this.getList();
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('pet/info/export', {
                ...this.queryParams
            }, `info_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style lang="scss" scoped>
.cashier {
    .containter {
        .box {
            padding: 15px 20px;
            margin-bottom: 15px;

            .el-form-item {
                margin: 0;
            }

            .info-box {
                .info-head {
                    .info-left {
                        margin-right: 10px;

                        img {
                            width: 60px;
                            border-radius: 50%;
                        }
                    }

                    .info-middle {
                        font-size: 14px;
                        width: 100%;

                        div:first-child {
                            margin-bottom: 10px;

                            span {
                                color: #6B9EFF;
                                cursor: pointer;
                                margin-right: 10px;
                            }

                            .edit {
                                i {
                                    cursor: pointer;
                                }
                            }

                            .icon {
                                i {
                                    font-size: 26px;
                                    margin-left: 5px;
                                    color: #333;
                                    cursor: pointer;
                                }
                            }

                        }

                        div:nth-child(2) {
                            margin-bottom: 5px;
                        }
                    }

                    .info-right {
                        white-space: nowrap;

                        i {
                            font-size: 26px;
                            margin-left: 5px;
                            color: #333;
                            cursor: pointer;
                        }
                    }
                }

                .info-foot {
                    margin-top: 10px;
                    color: #c1c4c7;
                    font-size: 12px;
                }
            }
        }

        .left {
            width: 330px;

            .vip {
                .vip-box {
                    min-height: 200px;

                    .vip-t {
                        color: rgb(0, 145, 255);
                        cursor: pointer;
                        margin: 20px 0 10px;
                    }

                    .vip-card {
                        height: 150px;
                        background: url("../../../assets/images/pt.png");
                        background-size: 100% 100%;
                        color: #333;
                        border-radius: 13px;
                        border: 2px solid #d5d5d5;
                        box-sizing: border-box;

                        .vip-no {
                            margin: 46px 0 0 15px;
                            color: #333;
                            line-height: 20px;
                            height: 20px;
                        }

                        .vip-price {
                            margin: 15px 15px 0 15px;

                            span {
                                font-size: 30px;
                                font-weight: bold;
                            }
                        }

                        .vip-pay {
                            width: 60px;
                            height: 22px;
                            background: #d9d9d9;
                            border-radius: 15px;
                            color: #595959;
                            text-align: center;
                            cursor: pointer;
                        }
                    }

                    .petInfo {
                        span {
                            margin-right: 10px;
                            font-size: 14px;
                        }

                        .bg {
                            background: #FFEE70;
                            padding: 3px 8px;
                            border-radius: 10px;
                            font-size: 10px;
                        }

                        .rk {
                            margin-top: 9px;
                            height: 17px;
                            font-size: 12px;
                            font-weight: 400;
                            color: #c1c4c7;
                        }

                        img {
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            background: #c1c4c7;
                            margin-right: 15px;
                        }
                    }
                }
            }

            .order {
                padding: 0;

                .head {
                    height: 52px;
                    line-height: 52px;
                    background: #333336;
                    border-radius: 12px 12px 0 0;
                    text-align: center;
                    color: #fff;
                }

                .content {
                    height: calc(100vh - 256px);
                    padding-bottom: 20px;
                    background: #fff;
                    border-radius: 12px;
                    text-align: center;
                    padding-top: 40px;
                    color: #666;
                }
            }
        }

        .right {
            width: calc(99% - 330px);

            .tableBox {
                height: calc(100vh - 205px);

                .num {
                    margin: 0 auto;
                    width: 25%;

                    span {
                        margin: 0 10px;
                    }

                    i {
                        color: #FFDD03;
                        font-size: 22px;
                    }

                    i:hover {
                        cursor: pointer;
                    }
                }
            }

            .shopping {
                font-weight: bold;
                font-size: 18px;
                color: #333336;
                line-height: 25px;
                margin: 10px 0 10px;

                span {
                    font-size: 14px;
                    line-height: 30px;
                }
            }

            .radio {
                span {
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                    border-radius: 22px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #423b3f;
                    padding: 0;
                    text-align: center;
                    border: 1px solid #d9d9d9;
                    margin-right: 10px;
                }

                span.active {
                    border: none;
                    background-color: #ffdd03;
                }

                span:hover {
                    cursor: pointer;
                }
            }

            .foot {
                justify-content: flex-end;

                span {
                    margin-left: 10px;
                }

                span.num {
                    font-size: 30px;
                    margin-left: 0;
                }
            }
        }
    }
}

.buyDialog {
    .buy-content {
        .buy-left {
            width: 20%;
            box-sizing: border-box;
            padding: 20px 0 30px 20px;

            .all {
                padding: 5px 10px;
                margin: 10px 0;
            }

            .all:hover {
                cursor: pointer;
                background: #F5F7FA;
            }
        }

        .buy-right {
            width: 80%;
            box-sizing: border-box;
            padding: 20px 20px 30px 20px;
            background: #F9F9F9;

            .buy-list {
                margin-top: 20px;
                height: 390px;

                .el-card {
                    display: inline-block;
                    width: 32%;
                    height: 90px;
                    margin-bottom: 10px;
                    vertical-align: top;
                }

                .el-card:nth-child(3n+2) {
                    margin: 0 2%;
                }

                .card-left {
                    width: 45%;
                    position: relative;

                    img {
                        width: 80px;
                        border-radius: 5px;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                .card-right {
                    width: 55%;

                    div {
                        white-space: nowrap;
                    }

                    div.num {
                        margin: 7px auto;
                        text-align: center;
                    }
                }

                .no-data {
                    width: 100%;
                    text-align: center;
                }
            }

            .buy-submit {
                position: relative;
                padding: 10px 20px;
                margin-top: 4px;
                height: 82px;
                overflow-y: auto;
                background: #fff;
                border-radius: 6px;
                border: 1px solid #d9d9d9;

                .left {
                    width: 85%;
                }

                .right {
                    width: 15%;
                }
            }
        }

        .buy-right.active {
            width: 100%;
        }
    }
}

.drawer-box {
    padding: 15px 30px;

    .drawer-t {
        font-size: 18px;
        color: #333336;
        line-height: 25px;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .drawer-list {
        .drawer-item {
            display: inline-block;
            width: 22%;
            height: 110px;
            background: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #ecebed;
            text-align: center;
            padding: 18px 0 0 0;
            box-sizing: border-box;
            cursor: pointer;

            img {
                width: 50px;
            }
        }

        .drawer-item:nth-child(4n+2) {
            margin: 0 4%;
        }

        .drawer-item:nth-child(4n+3) {
            margin-right: 4%;
        }

        .drawer-item.active {
            box-shadow: 0 0 5px rgba(255, 221, 3, .5);
            border-color: #ffdd03;
            background: #fff;
        }
    }

    .drawer-foot {
        width: 550px;
        position: fixed;
        bottom: 0;
        height: 68px;
        right: 0;
        background: #fff;
        z-index: 9;
        padding: 30px 30px 20px;
        box-shadow: 0 0 5px rgba(76, 76, 76, .35);

        span {
            font-size: 30px;
            font-weight: bold;
            line-height: 37px;
        }
    }

    .total {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        font-size: 18px;
        font-weight: bold;
        color: #333336;

        div {
            margin-bottom: 10px;

            span {
                font-size: 22px;
                color: #666;
            }
        }

        div.border {
            height: 50px;
            border-radius: 0 4px 4px 0;
            border: 1px solid #dcdfe6;
            outline: 0;
            padding: 0 10px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
            box-sizing: border-box;

            div {
                margin: 0;
            }
        }

        div.border:hover {
            border-color: #FFDD03;
            box-shadow: 0 0 5px #FFDD03;
        }
    }

    div.input {
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #333336;
    }
}

.back-money {
    display: inline-block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    font-weight: bold;
    font-size: 24px;
    color: #333;
    background: #F2F2F2;
    border-radius: 5px;
}
</style>